<template>
	<view class="billing">
		<view class="billing-head">
			<view :class="['item-head', item.type == isActive ? 'active' : '']" v-for="(item,i) in head" :key="i"
				@tap="headTab(item)">{{ item.name }}</view>
		</view>
		<view class="billing-item" v-if="isActive == 'money'" v-for="(item,i) in billingList" :key="i">
			<view class="left-bill">
				<view class="bill-title">{{ item.title }}</view>
				<view class="bill-time">
					<view class="year">{{ item.year }}</view>
					<view class="times">{{ item.time }}</view>
				</view>
			</view>
			<view class="right-bill" v-if="item.type == 'income'">+{{ item.money }}</view>
			<view class="right-bill" v-if="item.type == 'expend'">-{{ item.money }}</view>
		</view>
		<view class="billing-item" v-if="isActive == 'jifen'" v-for="(item,i) in jifenList" :key="i">
			<view class="left-bill">
				<view class="bill-title">{{ item.title }}</view>
				<view class="bill-time">
					<view class="year">{{ item.year }}</view>
					<view class="times">{{ item.time }}</view>
				</view>
			</view>
			<view class="right-bill" v-if="item.type == 'income'">+{{ item.money }}</view>
			<view class="right-bill" v-if="item.type == 'expend'">-{{ item.money }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				head: [{
						name: '资金明细',
						type: 'money'
					},
					{
						name: '积分明细',
						type: 'jifen'
					}
				],
				isActive: 'money',
				billingList: [{
						title: '充值',
						year: '2022-5-30',
						time: '10:17:21',
						money: '300.00',
						type: 'income'
					},
					{
						title: '充值',
						year: '2022-5-30',
						time: '10:17:21',
						money: '300.00',
						type: 'income'
					},
					{
						title: '支付订单',
						year: '2022-5-30',
						time: '10:17:21',
						money: '100.00',
						type: 'expend'
					}, {
						title: '提现',
						year: '2022-5-30',
						time: '10:17:21',
						money: '100.00',
						type: 'expend'
					},
					{
						title: '提现',
						year: '2022-5-30',
						time: '10:17:21',
						money: '100.00',
						type: 'expend'
					}
				],
				jifenList: [{
						title: '签到',
						year: '2022-5-30',
						time: '10:17:21',
						money: '10',
						type: 'income'
					},
					{
						title: '签到',
						year: '2022-5-30',
						time: '10:17:21',
						money: '10',
						type: 'income'
					},
					{
						title: '商品兑换',
						year: '2022-5-30',
						time: '10:17:21',
						money: '1000',
						type: 'expend'
					}
				]
			};
		},
		methods: {
			headTab(item) {
				this.isActive = item.type
			}
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #ccc;
	}

	.billing-head {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 80rpx;

		.item-head {
			font-size: 28rpx;
			letter-spacing: 3rpx;
			color: #787878;

			&.active {
				color: #333333;
				position: relative;

				&:before {
					content: '';
					display: block;
					width: 65rpx;
					height: 5rpx;
					background-color: #c60122;
					border-radius: 3rpx;
					position: absolute;
					bottom: -18rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.billing-item {
		width: 710rpx;
		height: 143rpx;
		background-color: #ffffff;
		border-radius: 3rpx;
		margin: 0 20rpx 17rpx;
		padding: 30rpx 0 30rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left-bill {
			.bill-title {
				font-size: 28rpx;
				letter-spacing: 3rpx;
				color: #363636;
				margin-bottom: 35rpx;
			}

			.bill-time {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				line-height: 36rpx;
				letter-spacing: 2rpx;
				color: #989898;
			}
		}

		.right-bill {
			font-size: 28rpx;
			letter-spacing: 3rpx;
			color: #d81e06;
		}
	}
</style>
